<template>
	<view class="login">
		<view class="logo">
			外卖
		</view>
		<u-tabs class="tab" :list="list1" lineWidth="30" @click="click" lineColor="#02A774" :activeStyle="{
		            color: '#02A774',
		            fontWeight: 'bold',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
		</u-tabs>
		<view class="" v-if='index===1'>
			<Sign></Sign>
		</view>
		<view class="" v-else>
			<Log></Log>
		</view>
		<view class="login_text">关于我们</view>
	</view>
</template>

<script>
	import myLog from "./components/log/log.vue"
	import mySign from "./components/sign/sign.vue"
	export default {
		components:{
			"Log":myLog,
			"Sign":mySign
		},
		data() {
			return {
				index: 1,
				list1: [{
					name: '注册',
				}, {
					name: '登录',
				}]
			}
		},
		methods: {
			// tab切换
			click(item) {
				// console.log('item', item);
				if(item.name==='注册'){
					this.index=1;
				}else{
					this.index=2
				}
			}
		}
	}
</script>

<style>
	.login {
		width: 100%;
		height: 100%;
	}

	.logo {
		width: 100%;
		height: 15vh;
		display: flex;
		justify-content: center;
		font-size: 50px;
		font-weight: 900;
		color: #02A774;
		line-height: 15vh;
		margin-top: 60px;
	}

	.tab {
		width: 50%;
		height: 10vh;
		margin-left: 145px;
		margin-top: 30px;
	}
	.login_text{
		width: 100%;
		height: 3vh;
		display: flex;
		justify-content: center;
	}
</style>